<template>
    <info-container :title="基准策略" class="table-layout">
        <el-container class="table-container">
            <el-header class="table-header">
                <el-col span="10">
                    <el-table :data="tableData" :show-header="false" :border="true" style="width: 100%">
                        <el-table-column class-name="first_column" prop="date" label="Date" width="180" />
                        <el-table-column prop="name" label="Name" />
                    </el-table>
                </el-col>
            </el-header>
            <el-main v-show="showChart" class="table-main">
                <the-line-chart class="the-line-chart" />
            </el-main>
        </el-container>


    </info-container>
</template>

<script>
import TheLineChart from "./TheLineChart.vue";
import InfoContainer from "./InfoContainer.vue"
export default {
    components: {
        InfoContainer,
        TheLineChart
    },
    props: {
        showChart: {
            type: Boolean,
            required: false,
            default: () => {
                return true
            }
        },
        tableData: {
            type: Array,
            required: false,
            default: [
                {
                    date: '2016-05-03',
                    name: 'Tom',
                },
                {
                    date: '2016-05-02',
                    name: 'Tom',
                },
            ]
        }
    }
    ,
    data() {
        return {
        }
    },
    methods: {
    }
};
</script>
<style lang="scss">
$table-width: 749px;
$table-height: 280px;

.first_column {
    background-color: rgb(245, 247, 250) !important;

    .cell {
        background-color: rgb(245, 247, 250) !important;
    }
}

.table-layout {
    width: $table-width;
    // height: $table-height;


    .table-container {
        height: 100%;

        .table-header {
            height: 20%;
            margin-bottom: 20px;
        }

        .table-main {
            height: 100%;
            padding: 0;

            .the-line-chart {
                width: 100%;
                height: 230px;
                color: black
            }
        }
    }
}
</style>